<template>
  <div class="header flex-row justify-content-between align-items-center">
    <!-- <el-dropdown> -->
    <span>{{username}}，您好！欢迎使用《叮当猫》批量验证</span>
    <div class="flex-row align-items-center">
      <div @click="showMyDialog">
        <i class="el-icon-headset" style="margin-right: 15px;font-size:20px;"></i>
        <span>联系客服</span>
      </div>
      <div style="margin-left: 30px;" @click="userCenterDialog">
        <i class="el-icon-user" style="margin-right: 15px;font-size:20px;"></i>
        <span>个人中心</span>
      </div>
      <el-button class="logout-button" @click="logout">退出登录</el-button>
    </div>
    <el-dialog title="个人中心" :visible.sync="isUserdialog" width="30%" center @close="closeDialog">
      <div class="center flex-column align-items-center">
        <div class="txt-left flex-column justify-content-start align-items-center">
          <p class="flex-row align-items-center">
            昵称：
            <el-input
              placeholder="请输入内容"
              v-model="username"
              :disabled="disableUser"
              class="user-input"
            ></el-input>
            <el-button type="text" @click="change" style="color:#f56c6c;" v-if="isBtn">修改</el-button>
            <el-button type="text" @click="submitUserName" v-if="!isBtn">提交</el-button>
          </p>
          <p class style="width:100%;">UID：{{UID}}</p>
        </div>

        <div class="QR-code">
          <div id="qrCode" ref="qrCodeDiv"></div>
          <p>我的分享二维码</p>
        </div>
      </div>

      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="isUserdialog = false">取 消</el-button>
        <el-button type="primary" @click="isUserdialog = false">确 定</el-button>
      </span>-->
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {},
  data () {
    return {
      username: '',
      isUserdialog: false,
      QRCodeSrc: '',
      UID: '',
      disableUser: true,
      isBtn: true
    }
  },
  computed: {
    uuid () {
      return sessionStorage.getItem('u')
    }
  },
  created () {
    this.getUserInfo()
  },
  mounted () {},
  watch: {},
  methods: {
    closeDialog () {
      this.disableUser = true
      this.isBtn = true
    },
    change () {
      this.disableUser = !this.disableUser
      this.isBtn = !this.isBtn
    },
    submitUserName () {
      if (this.username !== '') {
        this.editInfo()
      }
    },
    userCenterDialog () {
      this.isUserdialog = !this.isUserdialog
      this.$nextTick(() => {
        this.bindQRCode()
      })
    },
    showMyDialog () {
      this.$message.closeAll()
      this.$message('微信QQ客服暂未上线，如需要充值咨询请下载APP')
      // this.$store.dispatch("myDialogStatus/invokePushItems");
    },
    logout () {
      let rsaStr = `uuid=${this.uuid}`
      this.$getCode(rsaStr)
        .then(rsaCode => {
          this.http
            .userLogout(rsaCode)
            .then(res => {
              if (res.data.errno === '999') {
                sessionStorage.clear()
              }
            })
            .catch(err => {})
        })
        .catch(err => {})
    },
    getUserInfo () {
      let rsaStr = `uuid=${this.uuid}`
      this.$getCode(rsaStr).then(rsaCode => {
        this.http
          .getUserInfo(rsaCode)
          .then(res => {
            if (res.data.errno === '000') {
              this.username = res.data.result.data.nickname
              this.UID = res.data.result.data.hx_uid
              this.QRCodeSrc = `http://47.105.207.235/home/share/index?invite_code=${res.data.result.data.invite_code}&qrcode=user&name=JSS059M`
              //   this.$store.commit("pushCollects",res.data.result. );
              // this.integral = res.data.result.data.integral;
              // this.quarter_contribution =
              //   res.data.result.data.quarter_contribution;
              // this.total_contribution = res.data.result.data.total_contribution;
            }
          })
          .catch(err => {
            console.log(err)
          })
      })
    },
    editInfo () {
      let rsaStr = `nickname=${this.username}`
      this.$getCode(rsaStr).then(rsaCode => {
        this.http
          .editInfo(rsaCode)
          .then(res => {
            this.$message.closeAll()
            if (res.data.errno === '000') {
              this.$message.success(res.data.errmsg)
              this.disableUser = !this.disableUser
              this.isBtn = !this.isBtn
            } else {
              this.$message.error(res.data.errmsg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      })
    },
    bindQRCode () {
      this.$refs.qrCodeDiv.innerHTML = ''
      new this.$qrCode(this.$refs.qrCodeDiv, {
        text: this.QRCodeSrc,
        width: 120,
        height: 120,
        colorDark: '#333333', // 二维码颜色
        colorLight: '#ffffff', // 二维码背景色
        correctLevel: this.$qrCode.CorrectLevel.L // 容错率，L/M/H
      })
    }
  },
  components: {}
}
</script>

<style scoped lang="less">
.header {
  // width: 100%;
  padding: 20px 60px 20px 0;
  font-size: 20px;
}
.logout-button {
  // position: fixed;
  // bottom: 30px;
  text-align: center;
  padding: 0;
  border: 0;
  width: 80px;
  color: #f56c6c;
  // left: 0;
  margin-left: 40px;
}
.center {
  padding: 10px;
  text-align: center;
  font-size: 14px;
  .txt-left {
    width: 200px;
    text-align: left;
    // margin-bottom: 15px;
    .user-input {
      font-size: 13px;
      padding: 0;
    }
    button {
      margin-left: 5px;
    }
    p {
      margin-bottom: 15px;
      width: 100%;
    }
  }
  .QR-code {
    width: 120px;
    height: 120px;

    .qrCode {
      width: 100%;
      height: 100%;
    }

    p {
      margin-top: 10px;
    }
  }
}
</style>
<style>
.user-input {
  width: 60% !important;
}
.center .user-input .el-input__inner {
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding: 0 5px;
}
</style>
